<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        ul li {
            display: flex;
            width: 400px;
            justify-content: space-between;
            padding: 20px 0;
            margin: 0 20px;
            border-bottom: 1px solid #aaa;
        }

        ul li p {
            width: 162px;
        }

        ul li input {
            width: 50px;
        }

        ul li .add,
        ul li .minus {
            width: 20px;
            cursor: pointer;
        }

        .div-total {
            display: flex;
            width: 350px;
            margin-left: 20px;
            justify-content: space-between;
        }

        .div-total span {
            margin: 0 40px;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <p>小米 mix4</p>
            <div class="money">￥<span>1999&emsp;</span></div>
            <div><input type="number" value="0">台</div>
            <button class="add">+</button>
            <button class="minus">-</button>
        </li>
        <li>
            <p>iphone13 pr omax</p>
            <div class="money">￥<span>11999</span></div>
            <div><input type="number" value="0">台</div>
            <button class="add">+</button>
            <button class="minus">-</button>
        </li>
        <li>
            <p>华为P30 保时捷限定版</p>
            <div class="money">￥<span>19999</span></div>
            <div><input type="number" value="0">台</div>
            <button class="add">+</button>
            <button class="minus">-</button>
        </li>
    </ul>
    <div class="div-total">
        <div>总共 <span class="stand">0</span>台</div>
        <div>总计 <span class="price">0</span>元</div>
    </div>


    <script>
        // 需求：点击加号按钮，减号按钮的时候，input框中对应台数增加减少（当为0的时候无法减少），并将总计多少台数和价格对应到下面，在输入框中输入对应台数的时候，下面的总价和台数也对应改变
        //封装总价和总台数函数
        let money = document.querySelectorAll("li .money span")
        let setNumber = document.querySelectorAll("input")
        //总台数和总价格获取
        let stand = document.querySelector(".stand")
        let price = document.querySelector(".price")
        function total(moneys, setNumbers) {
            //总价
            let addMoney = 0
            //总台数
            let addSet = 0
            moneys.forEach((i, j) => {
                addMoney = (i.textContent) * (+ setNumbers[j].value) + addMoney
                addSet += +setNumbers[j].value
            });
            return { addMoney, addSet }
        }
        //加号点击事件
        let adds = document.querySelectorAll(".add")
        adds.forEach((i, j) => {
            i.addEventListener("click", function () {
                setNumber[j].value++
                let add = total(money, setNumber)
                stand.textContent = add.addSet
                price.textContent = add.addMoney
            })
        });

        //减号事件
        let minus = document.querySelectorAll(".minus")
        minus.forEach((i, j) => {
            i.addEventListener("click", function () {
                if (setNumber[j].value == 0) {
                    return
                }
                setNumber[j].value--
                let add = total(money, setNumber)
                stand.textContent = add.addSet
                price.textContent = add.addMoney
            })
        });

        //在输入框中输入对应台数
        window.addEventListener("input", function () {
            setNumber.forEach((i,j) => {
                if (i.value<0||i.value=="") {
                   return i.value=0
                }
            });
            console.log(111);
            let add = total(money, setNumber)
            stand.textContent = add.addSet
            price.textContent = add.addMoney
        })
    </script>
</body>

</html>